<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        html {
            background-color: #43c4ec9d;
            font-family: 'helvetica neue';
            text-align: center;
            font-size: 10px;
        }
        body {
            margin: 0;
            font-size: 2rem;
            display: flex;
            flex: 1;
            min-height: 100vh;
            align-items: center;
        }
        .clock {
            width: 30rem;
            height: 30rem;
            border: 20px solid white;
            border-radius: 50%;
            margin: 50px auto;
            position: relative;
            padding: 2rem;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1),
            inset 0 0 0 3px #efefef,
            inset 0 0 10px black,
            0 0 10px rgba(0, 0, 0, 0.2)
        }
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
            transform: translateY(-3px);
        }
        .hand {
            width: 50%;
            height: 3px;
            position: absolute;
            top: 50%;
            transition: all 0.05s;
            transition-timing-function: cubic-bezier( 0.42, 0, 0.34 );
            transform: rotate(90deg);
            transform-origin: 100%;
            /* transition --- 增加动画效果
                transition-timing-function --- 控制指针移动的速度
                ease-in-out --- 先慢中间快后慢  
            */
        }
        .second-hand {
            background: pink;
        }
        .min-hand {
            background: cornflowerblue;
        }
        .hour-hand {
            background: cadetblue;
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>
    <script>
    /*
    transform 旋转
    transform-origin 旋转的定点
    */
        // 获取时分秒的dom
        const secondHand = document.querySelector('.second-hand')
        const minHand = document.querySelector('.min-hand')
        const hourHand = document.querySelector('.hour-hand')

        function setDate() {
            const now = new Date()
            const seconds = now.getSeconds()
            const minutes = now.getMinutes()
            const hours = now.getHours()
            const secondsDegrees = (seconds*6)+90
            const minutesDegrees = (minutes*6)+ ((seconds/60)*6) +90
            const hoursDegrees = (hours*30) + ((minutes/60)*30) + ((secondsDegrees/3600)*30) +90
            secondHand.style.transform = `rotate(${secondsDegrees}deg)`
            minHand.style.transform = `rotate(${minutesDegrees}deg)`
            hourHand.style.transform = `rotate(${hoursDegrees}deg)`
        }
        setInterval(setDate,1000)
        setDate()
    </script>
</body>
</html>

